<template>
  <div class="overview-component">
    <el-card class="overview-card" :class="{ 'edit-mode': isEditMode }">
      <!-- 编辑模式工具栏 -->
      <div v-if="isEditMode" class="component-toolbar">
        <el-button-group size="small">
          <el-button @click="$emit('configure-component', componentConfig)" icon="Setting" circle />
          <el-button @click="$emit('toggle-visibility')" :icon="component.visible ? 'View' : 'Hide'" circle />
          <el-button @click="$emit('remove')" icon="Delete" type="danger" circle />
        </el-button-group>
      </div>

      <!-- 组件标题 -->
      <template #header>
        <div class="card-header">
          <span class="card-title">{{ component.title }}</span>
          <el-button-group size="small">
            <el-button @click="refreshData" icon="Refresh" circle />
            <el-button @click="exportData" icon="Download" circle />
          </el-button-group>
        </div>
      </template>

      <!-- 数据概览内容 -->
      <div class="overview-content">
        <div class="metrics-grid" :class="`columns-${config.columns || 4}`">
          <div 
            v-for="metric in metrics" 
            :key="metric.key"
            class="metric-card"
            :class="metric.trend"
          >
            <div class="metric-header">
              <div class="metric-icon" :style="{ backgroundColor: metric.color }">
                <el-icon>
                  <component :is="metric.icon" />
                </el-icon>
              </div>
              <div class="metric-trend" v-if="config.showTrend">
                <el-icon :class="getTrendClass(metric.change)">
                  <component :is="getTrendIcon(metric.change)" />
                </el-icon>
                <span :class="getTrendClass(metric.change)">{{ Math.abs(metric.change) }}%</span>
              </div>
            </div>
            
            <div class="metric-content">
              <div class="metric-value">{{ formatValue(metric.value, metric.type) }}</div>
              <div class="metric-label">{{ metric.label }}</div>
              <div class="metric-subtitle" v-if="metric.subtitle">{{ metric.subtitle }}</div>
            </div>
            
            <div class="metric-progress" v-if="metric.target">
              <el-progress 
                :percentage="getProgressPercentage(metric.value, metric.target)"
                :stroke-width="4"
                :show-text="false"
                :color="metric.color"
              />
              <span class="progress-text">目标: {{ formatValue(metric.target, metric.type) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  TrendCharts, 
  ShoppingCart, 
  Wallet, 
  UserFilled,
  Box,
  ArrowUp,
  ArrowDown,
  Minus
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  component: {
    type: Object,
    required: true
  },
  componentConfig: {
    type: Object,
    default: () => ({})
  },
  isEditMode: {
    type: Boolean,
    default: false
  },
  visible: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['configure', 'toggle-visibility', 'remove', 'configure-component'])

const config = computed(() => props.component.config || {})

// 模拟数据
const metrics = ref([
  {
    key: 'revenue',
    label: '总收入',
    subtitle: '本月累计',
    value: 1284560,
    type: 'currency',
    change: 12.5,
    target: 1500000,
    color: '#409eff',
    icon: TrendCharts
  },
  {
    key: 'orders',
    label: '订单数量',
    subtitle: '今日新增',
    value: 2340,
    type: 'number',
    change: -3.2,
    target: 2500,
    color: '#67c23a',
    icon: ShoppingCart
  },
  {
    key: 'profit',
    label: '净利润',
    subtitle: '本月累计',
    value: 456780,
    type: 'currency',
    change: 8.7,
    target: 500000,
    color: '#e6a23c',
    icon: Wallet
  },
  {
    key: 'customers',
    label: '活跃客户',
    subtitle: '本周活跃',
    value: 12340,
    type: 'number',
    change: 15.3,
    target: 15000,
    color: '#f56c6c',
    icon: UserFilled
  },
  {
    key: 'inventory',
    label: '库存周转',
    subtitle: '本月平均',
    value: 4.2,
    type: 'decimal',
    change: 0,
    target: 5.0,
    color: '#909399',
    icon: Box
  },
  {
    key: 'conversion',
    label: '转化率',
    subtitle: '本周平均',
    value: 0.234,
    type: 'percentage',
    change: 2.1,
    target: 0.25,
    color: '#722ed1',
    icon: TrendCharts
  }
])

// 格式化数值
const formatValue = (value, type) => {
  switch (type) {
    case 'currency':
      return `¥${(value / 10000).toFixed(1)}万`
    case 'percentage':
      return `${(value * 100).toFixed(1)}%`
    case 'decimal':
      return value.toFixed(1)
    default:
      return value.toLocaleString()
  }
}

// 获取趋势图标
const getTrendIcon = (change) => {
  if (change > 0) return ArrowUp
  if (change < 0) return ArrowDown
  return Minus
}

// 获取趋势样式类
const getTrendClass = (change) => {
  if (change > 0) return 'trend-up'
  if (change < 0) return 'trend-down'
  return 'trend-neutral'
}

// 计算进度百分比
const getProgressPercentage = (current, target) => {
  return Math.min((current / target) * 100, 100)
}

// 刷新数据
const refreshData = () => {
  // 模拟数据刷新
  metrics.value.forEach(metric => {
    const randomChange = (Math.random() - 0.5) * 0.1
    metric.value = Math.max(0, metric.value * (1 + randomChange))
    metric.change = (Math.random() - 0.5) * 20
  })
  ElMessage.success('数据已刷新')
}

// 导出数据
const exportData = () => {
  ElMessage.info('数据导出功能开发中...')
}
</script>

<style scoped>
.overview-component {
  position: relative;
}

.overview-card {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.overview-card.edit-mode {
  border: 2px dashed #409eff;
  position: relative;
}

.overview-card.edit-mode:hover {
  border-color: #67c23a;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.component-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.overview-content {
  padding: 0;
}

.metrics-grid {
  display: grid;
  gap: 16px;
}

.metrics-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.metrics-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.metrics-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.metrics-grid.columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.metric-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.metric-card:hover {
  background: #f0f2f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-neutral {
  color: #909399;
}

.metric-content {
  margin-bottom: 12px;
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 2px;
}

.metric-subtitle {
  font-size: 12px;
  color: #909399;
}

.metric-progress {
  margin-top: 8px;
}

.progress-text {
  font-size: 11px;
  color: #909399;
  margin-top: 4px;
  display: block;
}

@media (max-width: 1200px) {
  .metrics-grid.columns-4,
  .metrics-grid.columns-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .metric-card {
    padding: 16px;
  }
  
  .metric-value {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}
</style>